<template>
  <el-card>
   <div class="container">
       <h1>评论区</h1>
       <div class="commentContainer">
    
                     <div class="commentItemBox" v-for="comment in commentList" :key="comment.comId">
                <div class="userBox">
                     <div class="avatarBox">
                        <img :src="comment.avatarUrl" alt="">
                    </div>
                    <div class="username">{{comment.nickName}}:</div>
                    <div class="commentDateTime">{{comment.dateTime}}</div>
                </div>
                <div class="contentBox">
                    <div class="content">{{comment.content}}</div>
                </div>
            </div>
  
           
           
            <div class="sendCommentBox">
                <el-input
                type="textarea"
                :rows="2"
                placeholder="快点发表你的评论吧！"
                resize="none"
                
                v-model="addCommentForm.content">
                </el-input>
                <el-button type="primary" @click="sendComment()">
                    发表评论
                </el-button>
            </div>
       </div>

   </div>
  </el-card>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
    props:['uid','sid'],
    data() {
        return {
            commentList:[],
            // 添加评论表单
            addCommentForm:{
                uid:'',
                sid:'',
                content:''
            }
        }
    },
    computed:{
        ...mapGetters({commentListData:'commentList'})
    },
    methods: {
       // 获取评论信息
       getCommentList(){
           this.$store.dispatch('getCommentData').then(ok=>{
               if(ok){
                   this.commentList = this.commentListData.filter(item=>{
                       return item.sid == this.sid;
                   });
               }
           })
       },
       // 发表评论回调    
       sendComment(){
           if(this.addCommentForm.content){
               this.addCommentForm.uid = this.uid;
               this.addCommentForm.sid = this.sid;
               this.$store.dispatch('addComment',this.addCommentForm).then(ok=>{
               if(ok) this.$message.success('成功发表评论！');
               this.addCommentForm.content = '';
               this.$emit('submitComment');   
            });
           }else{
                this.$alert('请输入内容！', '提示', {
                    confirmButtonText: '确定',
                }); 
           }
    
       }
    },
    created() {
        this.getCommentList();
        this.addCommentForm.uid = this.uid;
        this.addCommentForm.sid = this.sid;
    },
}
</script>

<style lang="less" scoped>
    .container{
        height: auto;
        h1{
            font-size: 1.3em;
            margin: 0;
            padding: 0;
            margin-bottom: 10px;
        }
        .commentContainer{
            .commentItemBox{
                height: 90px;
                display: flex;
                margin-bottom: 5px;
                box-shadow: 0px 1px 2px rgb(141, 140, 140);
                border-radius: 10px 0px 0 10px;
                background: rgb(245, 245, 245);
                .userBox{
                    border-radius: 10px 10px 10px 10px;
                    width: 200px;
                    height: 90px;
                    background: rgb(175, 221, 244);
                    display: flex;
                    justify-content: center;
                    position: relative;
                     .username{
                        height: 25px;
                        width: 90px;
                        margin-top: 10px;
                        text-align: right;
                        color: rgb(28, 151, 239);
                        font-size: 1em;
                     }
                     .avatarBox{
                        background: rgb(221, 240, 240);
                        width: 75px;
                        height: 75px;
                        border-radius: 50%;
                        align-self: center;
                        margin-right: 10px;
                        border: 3px solid white;
                        img{
                            width: 100%;
                            height: 100%;
                            border-radius: 50%;
                        }
                    }
                    .commentDateTime{
                        position: absolute;
                        text-align: right;
                        width: 90px;
                        height: 20px;
                        bottom: 18%;
                        right: 5%;
                        font-size: 0.5em;
                    }
                }
                .contentBox{
                    flex: 1;
                    width: 100%;
                    height: 100%;
                    background: rgb(245, 245, 245);
                    padding-left: 5px;
                    .content{
                     margin-top: 10px;
                     height: 75px;
                     width: 100%;
                     font-size:0.9em;
                    
                    }
                }
            }
            .sendCommentBox{
                display: flex;
            }
        }
        .empty{
            height: 80px;
            background:#e7e3e399;
            text-align: center;
            line-height: 80px;
            margin-bottom: 10px;
            border-radius: 5px;
            color: rgb(94, 92, 92);
        }
    }
    el-card{
        height: 800px;
    }
</style>